<!--  -->
<template>
  <div class="order-page">
    <div class="mainbox">
      <div class="topBox">
        <el-input v-model="srarchInput" placeholder="请输入内容" clearable></el-input>
        <el-button type="primary"  @click="searchContent">查找</el-button>
      </div>
      <div class="tableBox">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="scope">
              <div class="orderMain">
                <div class="orderMainArea">
                  <div class="leftBox">
                    <h3>订单项信息</h3>
                    <div
                      class="itemList"
                      v-for="item in scope.row.orderItemList"
                      :key="item"
                    >
                      <div class="left">
                        <div class="imageBox">
                          <img :src="item.defaultImage" alt="" />
                        </div>
                        <div class="skuNameB">
                          {{ item.skuName }}
                        </div>
                      </div>
                      <div class="priceBox">￥{{ item.originalPrice }}.00</div>
                    </div>
                  </div>
                  <div class="rightBox">
                    <div class="InfoBox">
                      <h3>收货信息</h3>
                      <span
                        >收货人：{{
                          scope.row.receiveGoodsInfoEntity.name
                        }}</span
                      >
                      <span
                        >联系方式：{{
                          scope.row.receiveGoodsInfoEntity.phone
                        }}</span
                      >
                      <span
                        >收货地址：{{
                          scope.row.receiveGoodsInfoEntity.address
                        }}</span
                      >
                    </div>
                    <div class="InfoBox">
                      <h3>订单信息</h3>
                      <span>订单编号：{{ scope.row.serialNo }}</span>
                      <span>下单时间：{{ scope.row.updatedTime }}</span>
                    </div>
                    <div class="InfoBox">
                      <h3>商品信息</h3>
                      <span>商品总额：{{ scope.row.totalAmount }}</span>
                      <span>配送费用：{{ scope.row.freight }}</span>
                      <span>应付金额：{{ scope.row.paymentAmount }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="serialNo"
            label="订单编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="distributionType"
            label="运输方式"
            align="center"
          ></el-table-column>
          <el-table-column prop="orderStatus" label="订单状态" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.orderStatus === 'finished'"
                >已完成</el-tag
              >
              <el-tag type="" v-if="scope.row.orderStatus === 'pendingPayment'"
                >待付款</el-tag
              >
              <el-tag
                type="warning"
                v-if="scope.row.orderStatus === 'pendingReceipt'"
                >待收货</el-tag
              >
              <el-tag
                type="info"
                v-if="scope.row.orderStatus === 'pendingEvaluation'"
                >待评价</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="totalAmount"
            label="订单总额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="paymentType"
            label="付款方式"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createdTime"
            label="时间"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      tableData: [
        {
          creatTime: '2016-05-02',
          serialNo: '123',
          skuNo: '123',
          quantity: 100,
          originalPrice: 520,
          discountType: 1,
          discountValue: '70%',
        },
      ],
      srarchInput: '',
      pagenum: 1,
      total: 1,
      pagesize: 1,
      queryInfo: { query: '', curPage: 1, pagesSize: 10 },
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 监听页面pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodsList()
    },
    // 监听页码值的改变
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getGoodsList()
    },
    getOrderList() {
      return this.$http({
        url: this.$http.adornUrl('/mall/orderinfo/list'),
        method: 'get',
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        console.log(data)
        if (data && data.code === 0) {
          this.tableData = data.page.list
        } else {
          this.tableData = []
        }
      })
    },
    searchContent() {
      let serialNo = this.srarchInput
      if (serialNo) {
        return this.$http({
          url: this.$http.adornUrl(`/mall/orderinfo/info/${serialNo}`),
          method: 'get',
        }).then(({ data }) => {
          console.log(data)
          if (data && data.code === 0) {
            this.tableData = []
            this.tableData.push(data.orderInfo)
            this.total = 1
          }
        })
      }
      this.getOrderList()
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getOrderList()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss'>
//@import url(); 引入公共css类
.order-page {
  .mainbox {
    display: flex;
    flex-direction: column;
    .topBox {
      display: flex;
      align-items: center;
      width: 400px;
      padding: 20px 0;
      .el-input {
        margin: 0 10px 0 0;
      }
    }
    .tableBox {
      .orderMain {
        .orderMainArea {
          display: flex;
          .leftBox {
            border-right: 1px solid #eaedf4;
            padding: 0 20px;
            .itemList {
              display: flex;
              align-items: center;
              .left {
                display: flex;
                align-items: center;
                width: 800px;
                font-size: 16px;
                color: #111;
                font-weight: 700;
                .imageBox {
                  height: 100px;
                  width: 100px;
                  margin-right: 20px;
                  img {
                    height: 100%;
                    width: 100%;
                  }
                }
              }
              .priceBox {
                font-size: 18px;
                color: #111;
                font-weight: 700;
              }
            }
          }
          .rightBox {
            padding: 0 40px;
            flex: 1;
            .InfoBox {
              display: flex;
              flex-direction: column;
              span {
                font-size: 14px;
                color: #111;
                margin: 5px 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
